
/**
 * Created by 何晓波 on 2022/5/12.
 * Edit by 何晓波 on
 * 拖动
 */
const drag = {
    bind(el, binding, vnode) {
        window.dragElTopIndex = 1000
        const oDiv = el // 当前元素
        document.onselectstart = () => {
            return false
        }
        oDiv.onmousedown = e => {
            // 如果点击的元素有 noDrag属性，则不触发拖动
            if(e.target.getAttribute('data-drag')) return

            const elWidth = oDiv.offsetWidth
            const elHeight = oDiv.offsetHeight

            // 鼠标按下时的鼠标所在的X，Y坐标
            // 鼠标按下，改为fixed定位
            // oDiv.style.position = 'fixed'
            oDiv.style.zIndex = window.dragElTopIndex++
            // oDiv.classList.add('box-shadow-big')

            // 计算当前元素距离可视区的距离
            const marginTop = oDiv.style.marginTop ? parseInt(oDiv.style.marginTop) : 0
            const marginRight = oDiv.style.marginRight ? parseInt(oDiv.style.marginRight) : 0
            const disX = e.clientX - oDiv.offsetLeft - marginRight
            const disY = e.clientY - oDiv.offsetTop + marginTop

            document.onmousemove = e => {
                // 通过事件委托，计算移动的距离
                // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
                const l = e.clientX - disX
                // 计算元素距离视口右边距
                const r = window.innerWidth - l - elWidth
                const t = e.clientY - disY
                // 计算移动当前元素的位置，并且给该元素样式中的right和top值赋值
                // 这里用right定位，因为小组件的关闭按钮再右上方，避免隐藏后按钮移位
                if(r > 0 - marginRight && r + elWidth < window.innerWidth - marginRight) {
                    oDiv.style.right = r + 'px'
                }
                if(t > 0 - marginTop && t + elHeight < window.innerHeight - marginTop) {
                    oDiv.style.top = t + 'px'
                }
            }
            document.onmouseup = e => { // 鼠标抬起，清空之前所在的位置，新拖拽的位置已生成并赋值
                document.onmousemove = null
                document.onmouseup = null
            }
            // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
            return false

        }
    },
    update() {

    },
    unbind(el, binding) {

    }
};

export default drag
